<template>
<div style="width: 100%;display: flex">
       <div class="left-pop-user">
         <div style="display: flex;margin-left: 310px;margin-bottom: 4px">
           <el-input placeholder="请输入开平厂家名称" v-model="searchMsg"     clearable  style="width: 220px;margin-left: 40px">
             <el-button slot="append" size="small" icon="el-icon-search"  @click="changeSerachMsg"></el-button>
           </el-input>
         </div>
         <el-table
           v-loading="loading"
           element-loading-text="已经很努力加载了(•́へ•́╬)"
           element-loading-spinner="el-icon-loading"
           element-loading-background="rgba(0, 0, 0, 0.8)"
           :data="kaipingGuyList"
           style="width: 100%">
           <el-table-column
             label="开平厂家Id"
             align="center"
             width="90">
             <template slot-scope="scope">
               <span >{{ scope.row.kaipingguyId }}</span>
             </template>
           </el-table-column>
           <el-table-column
             label="名称"
             align="center"
             >
             <template slot-scope="scope">
               <el-popover trigger="hover" placement="top"   >
                 <p>地址: {{ scope.row.address }}</p>
                 <p>电话:{{scope.row.phone}}</p>
                 <p>邮箱:{{scope.row.email}}</p>
                 <p>qq&nbsp;:{{scope.row.qq}}</p>
                 <p>注册时间:{{scope.row.signupTime}}</p>
                 <div slot="reference" class="name-wrapper">
                   <el-tag size="medium">{{ scope.row.kaipingguyName }}</el-tag>
                 </div>
               </el-popover>
             </template>
           </el-table-column>
           <el-table-column align="center" label="开平欠款">
             <template slot-scope="scope">
               <span >{{ scope.row.debt }}元</span>

             </template>
           </el-table-column>
           <el-table-column
             align="center"
             label="未开票金额"
           >
             <template slot-scope="scope">
               <span >{{ scope.row.invoice }}</span> <span>元</span>
             </template>
           </el-table-column>
           <el-table-column align="center"  label="操作">
             <template slot-scope="scope">
               <el-button
                 size="mini"
                 @click="handleEdit(scope.row)" type="success">选择</el-button>

             </template>
           </el-table-column>

         </el-table>
         <el-pagination
           style="margin-top: 20px"
           :page-size="pageSize"
           :current-page="currentPage"
           background
           layout="prev, pager, next"
           @current-change="changePage"
           :total=total>
         </el-pagination>
       </div>

  <div class="right-pop-user">
    <h3>新开平厂家进行注册(<span style="color: #ff3526">*</span>为必填，其他可选填)</h3>

    <div style="margin-top: 4px">
      <span><span style="color: #ff3526">*</span>开平厂家:&nbsp;&nbsp;&nbsp;&nbsp;</span>
        <el-input clearable maxlength="10" style="width: 150px" placeholder="厂家名称" v-model="newKaiPingGuy.kaipingguyName"></el-input>
    </div>
    <div style="margin-top: 7px">
      <span style="color: #ff3526">*</span><span>性别:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
      <el-radio v-model="newKaiPingGuy.sex" label="男">男</el-radio>
      <el-radio v-model="newKaiPingGuy.sex" label="女">女</el-radio>
    </div>
    <div style="margin-top: 7px">
      <span style="color: #f2f2f2">*</span><span>电话:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
      <el-input onkeyup="value=value.replace(/^\D*(\d*(?:\.\d{0})?).*$/g, '$1')" clearable maxlength="11" style="width: 150px" v-model="newKaiPingGuy.phone" ></el-input>
    </div>
    <div style="margin-top: 7px">
      <span style="color: #f2f2f2">*</span><span>qq:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
      <el-input onkeyup="value=value.replace(/^\D*(\d*(?:\.\d{0})?).*$/g, '$1')" clearable   maxlength="15" style="width: 150px" v-model="newKaiPingGuy.qq"></el-input>
    </div>
    <div style="margin-top: 7px">
      <span style="color: #f2f2f2">*</span><span>邮箱:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
      <el-input clearable type="email"  style="width: 150px" v-model="newKaiPingGuy.email"></el-input>
    </div>
    <div style="margin-top: 7px">
      <span style="color: #f2f2f2">*</span><span>地址:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
      <el-input clearable  maxlength="20" style="width: 150px" v-model="newKaiPingGuy.address"></el-input>
    </div>
    <div style="margin-top: 9px">
      <span style="color: #f2f2f2">*</span><span>备注:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
      <el-input clearable type="textarea" :row="2"   show-word-limit maxlength="20" style="width: 150px" v-model="newKaiPingGuy.remark"></el-input>
    </div>
    <div style="margin-top: 60px;margin-right: 10px">
      <el-button type="success" class="btn-ss" style="width: 100%" @click="addNewKaiPingGuy">添加新供应商</el-button>
    </div>


  </div>
</div>
</template>
<!--客戶的弹窗-->
<script>
import {get} from "../../utils/request";
import {CLIENT_POP_SHOW_DATA} from "../../utils/basic-data";

export default {
  name: "ClientPop",
  data(){
    return {
      kaipingGuyList:[],
      loading:true,
      searchMsg:null,
      total:0,
      pageSize:CLIENT_POP_SHOW_DATA,
      currentPage:1,
      newKaiPingGuy:{
        kaipingguyName:'',
        sex:'男',
        phone:null,
        qq:null,
        email:null,
        address:null,
        remark:null
      }
    }
  },
  created() {

  },
  mounted() {


    get('/api/v1/kaipingguy/pop/show',{now:this.currentPage,size:this.pageSize}).then(resp=>{
      this.kaipingGuyList=resp.data.objectList
      this.total=resp.data.total
      this.currentPage=resp.data.currenPage
      this.loading=false
    })

  },
  methods: {
    addNewKaiPingGuy(){
      var kaipingguyName = this.newKaiPingGuy.kaipingguyName.replace(/\s*/g,"");
      if (kaipingguyName==='') {
        this.$message({
          message: '开平厂家名称不能为空',
          type: 'warning'
        });
        return
      }

      let kaiPingGuyMsg={kaiPingGuy:this.newKaiPingGuy,isNewKaiPingGuy: true}
      this.$emit('getKaiPingWithChildren',kaiPingGuyMsg)
    },

    handleEdit(kaiPingGuy) {
      let kaiPingGuyMsg={kaiPingGuy:kaiPingGuy,isNewKaiPingGuy:false}
      this.$emit('getKaiPingWithChildren',kaiPingGuyMsg)
    },
    changeSerachMsg(){
      this.loading=true
      this.currentPage=1
      get('/api/v1/kaipingguy/pop/show',{now:this.currentPage,size:this.pageSize,groupId:this.groupId===0?null:this.groupId,searchMsg:this.searchMsg}).then(resp=>{
        this.kaipingGuyList=resp.data.objectList
        this.total=resp.data.total
        this.currentPage=resp.data.currenPage
        this.loading=false
      })
    },
    changePage(value){
          this.loading=true
        get('/api/v1/kaipingguy/pop/show',{now:value,size:this.pageSize,groupId:this.groupId===0?null:this.groupId,searchMsg:this.searchMsg}).then(resp=>{
          this.kaipingGuyList=resp.data.objectList
          this.total=resp.data.total
          this.currentPage=resp.data.currenPage
          this.loading=false
        })
    },
  }
}
</script>

<style scoped>
.btn-ss{
  font-size: 20px;
  font-weight: bold;
}
.left-pop-user{
  flex: 70%;
  position: relative;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  min-height: 567px;
  /*height: 100px;*/
  /*background-color: pink;*/
}
.right-pop-user{
  flex: 30%;
  height: 513px;
  /*border:1px solid #2c3e50;*/
  border-radius: 6px;
  padding-left: 10px;
  background-color: #f2f2f2;
}
</style>
